<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	  <style type="text/css">
        .webpartTitle
        {
            background-color: #E3EFFF;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            width: 100%;
            height: 24px;
            padding: 5px 12px 5px 12px;
            font-family: 微软雅黑;
            font-size: 14px;
        }
        .webpartBody
        {
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-top: 0px solid #ccc;
            border-bottom: 1px solid #ccc;
            background-color: White;
            width: 100%;
            padding: 5px 12px 5px 12px;
            font-family: 微软雅黑;
            font-size: 14px;
        }
        .button
        {
            background-image: url("icons/toolbar/btn_common.png");
            border: 0px solid #ccc;
            width: 79px;
            height: 22px;
            color: White;
            cursor: hand;
            font-family: 微软雅黑;
            font-size: 12px;
        }
        .popupPanel
        {
            text-align: center;
            vertical-align: middle;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2002;
        }
        .icon
        {
            width: 24px;
            height: 24px;
            border: 2px solid transparent;
            padding: 3px 3px 3px 3px;
            cursor: default;
        }
        
    </style>

	<style type="text/css">
	body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
	#allmap {width: 100%; height:600px; overflow: hidden;}
	#result {width:100%;font-size:12px;}
	dl,dt,dd,ul,li{
		margin:0;
		padding:0;
		list-style:none;
	}
	p{font-size:12px;}
	dt{
		font-size:14px;
		font-family:"微软雅黑";
		font-weight:bold;
		border-bottom:1px dotted #000;
		padding:5px 0 5px 5px;
		margin:5px 0;
	}
	dd{
		padding:5px 0 0 5px;
	}
	li{
		line-height:28px;
	}
	</style>
	<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C6a9bbce9b1e3be4809d519a68eccad2"></script>
	<!--加载鼠标绘制工具-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<!--加载检索信息窗口-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
	<script language="javascript" type="text/javascript" src="js/emap.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
	<title>鼠标绘制工具</title>

	
</head>
<body>
   <form id="map_form">
	<table style="width:1250px" border="0" cellpadding="0" cellspacing="15">
		<tr>
			<td  style="width:300px;padding-right:24px" valign="top">
				
				<div class="webpartTitle">
					基本信息</div>
				<div class="webpartBody">
					
					<table border="0" cellpadding="6" cellspacing="0" width="100%">
						<tr>
							<td style="width: 80px" align="center">
								城市
							</td>
							<td>
								<input id="cityName"  style="width: 80px;"/>
								<input type="button" value="查询" onclick="theLocation()" />
							</td>
						</tr>
						<tr style="display:none">
							<td style="width: 80px" align="center">
								名称<span style="color: Red">*</span>
							</td>
							<td>
								<input autocomplete="off" id="LayerEditor_name" />
							</td>
						</tr>
						<tr style="display:none">
							<td align="center">
								代码<span style="color: Red">*</span>
							</td>
							<td>
								<input id="LayerEditor_code" value="1234567890"/>
							</td>
						</tr> 
						<tr>
						<td style="width: 80px" align="center">中心点经度</td>
						<td>
                          <div id="input_x" >113.32354</div>
						</td>
						</tr>
						<tr>
							<td style="width: 80px" align="center">中心点纬度</td>
							<td>
	                          <div id="input_y" >23.088981</div>
							</td>
						</tr>
						<tr>
						<td style="width: 80px" align="center">标注点经度</td>
						<td>
                          <div id="marker_x" ></div>
						</td>
						</tr>
						<tr>
							<td style="width: 80px" align="center">标注点纬度</td>
							<td>
	                          <div id="marker_y" ></div>
							</td>
						</tr>
						<tr>
						   <td style="width: 90px" align="center">当前地图级别</td>
						   <td>
                             <div id="input_zoom">12</div>
						    </td>
						</tr>
						<tr>
				 	       <td align="left" valign="top" colspan="2">
                               <a title="添加点标注" href="javascript:addMarker();">点击添加点标注</a> &nbsp;&nbsp;
                               <a title="清除标注" href="javascript:clearAll();">清除标注</a> &nbsp;&nbsp;
							</td>
						</tr> 
						<tr>
				 	       <td align="left" valign="top" colspan="2">
				 	                           温馨提示：
				 	           <br/>1）可通过城市或者地图中的搜索框进行位置查询，定位位置；
				 	           <br/>2）点击《点击添加点标注》按钮后即可在地图上标点，标点后允许对该点进行拖拽，调整位置；
				 	           <br/>3）《清除标注》可以清楚地图上的标注。                 
							</td>
						</tr>		
					</table>
				</div>
				<br />
			<td  valign="top">
			    <div id="search_div" style="position:absolute;z-index:999;float:left;padding-left: 80px;">
			    	<input id="searchplace"  style="width: 220px;"/>
					<input id="s_p_search_btn" type="button" value="搜索" />
				    <input id="s_p_search_clear" type="button" value="清空" onclick="searchClear();"/> 
					<div id="searchlist" style="position:absolute;z-index:999;width: 350px; height: 10px; margin-right:10px; float:left;"></div>
			    </div>
				<div id="allmap" style="overflow:hidden;">	
					<div id="map" style=""></div>
				</div>
			</td>
		</tr>
	</table>
  </form>
  
	<div id="tips" style=" margin-left:10px; margin-top:5px;float:left">
	</div>
	<script type="text/javascript">

	// 百度地图API功能
	var map = new BMap.Map("allmap", {enableMapClick:false/**minZoom:4,maxZoom:8**/});//构造底图时，关闭底图可点功能
	
	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]}));//取消三维
	
	
	$(document).ready(function(){
		initialMap();
		
		createSearch();
        createAutocomlete();
        $("#s_p_search_btn").click(function () {
            searchPlace($("#searchplace").val());
        });
	});

	/* 创建和初始化地图
	 * 设置地图的状态，并为地图添加监听事件
	 */
	function initialMap(){
		
		
		var url = document.location.href; //获取url中"?"符后的字串 
		var x = getQueryString("x", url);
		var y = getQueryString("y", url);
		var zoom = getQueryString("zoom", url);
		var position = getQueryString("position", url);
		var centrePos = getQueryString("centrePos", url);
		
		if(centrePos != null && centrePos !=""){
			var centreArr  = centrePos.split(",");
			x = centreArr[0];
			y = centreArr[1];
		}
		
		if(position != null && position !=""){
			var posArr  = position.split(",");
			$("#marker_x").text(posArr[0]);
			$("#marker_y").text(posArr[1]);
			
			var marker = new BMap.Marker(new BMap.Point(posArr[0], posArr[1])); // 创建点
			overlays.push(marker);
			marker.enableDragging();
			map.addOverlay(marker);
        	//拖拽事件监听
        	marker.addEventListener("dragend", function (e) {
        	  var point_x = e.point.lng; //经度
        	  var point_y = e.point.lat; //纬度
      		  $("#marker_x").text(point_x);
    		  $("#marker_y").text(point_y);
        	});
		}
		
		//alert(x+"===="+y);
		//默认定位到海珠区
		if(x == null || x == ""){
			x=113.32354;
			//alert("x坐标为空，默认设置为116.403874");
		}
		if(y == null || y == ""){
			y=23.088981;
			//alert("y坐标为空，默认设置为39.914889");
		}
		if(zoom == null || zoom == ""){
			zoom=12;
			//alert("当前地图级别为空，默认设置为12");
		}
		
		map.centerAndZoom(new BMap.Point(x,y), zoom);
		map.enableScrollWheelZoom();
		map.enableKeyboard();

		//注册地图上的事件
		map.addEventListener("zoomend",resetMapZoom);
		map.addEventListener("dragend",resetMapCenter);
		map.addEventListener("moveend",resetMapCenter)
		

		window.map = map;
		
	}
	
	
    function createSearch() {
        var map = window.map;
        var local = new BMap.LocalSearch(map,
            {
                renderOptions: { map: map, panel: "searchlist" }
            });
        window.local = local;
    }
    //搜索
    function searchPlace(value) {
        window.local.search(value);
    }
    
    //搜索
    function searchClear() {
       $("#searchplace").val("");
       $("#searchlist").empty();
      
    }
    
    function createAutocomlete() {
        var map = window.map;
        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
                "input": "searchplace",
                "location": map
            });
        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            var addr =_value.business+ _value.province + _value.city + _value.district + _value.street + _value.streetNumber ;
            searchPlace(addr);
        });
    }
	
	
	function theLocation(){
		var city = document.getElementById("cityName").value;
		if(city != ""){
			map.centerAndZoom(city,11);      // 用城市名设置地图中心点
		}
	}
	
	
	map.enableScrollWheelZoom(true); //启用滚轮放大缩小

	map.disableDoubleClickZoom();

	

	var enableEditingOverlay;
    var overlays = [];
	
	$(document).keyup(function(e) {

		if (e.keyCode == 27) { 
			if(enableEditingOverlay != null){
				enableEditingOverlay.disableEditing();
			}
		}
	}
	);
	
	//完成事监听
	var overlaycomplete = function(e){
		
		//先清除一个上一个点
		clearAll();
		console.log(e.overlay);
        overlays.push(e.overlay);
        
		var point = e.overlay.point;
		$("#marker_x").text(point.lng);
		$("#marker_y").text(point.lat);
       
        // 只有标注点才可以允许拖拽
        if(drawingMode == BMAP_DRAWING_MARKER){
        	e.overlay.enableDragging();
        	//拖拽事件监听
        	e.overlay.addEventListener("dragend", function (e) {
        	  var x = e.point.lng; //经度
        	  var y = e.point.lat; //纬度
      		  $("#marker_x").text(x);
    		  $("#marker_y").text(y);
        	});
        }
        	
		e.overlay.addEventListener("dblclick", function(e) {

			for(var i = 0; i < overlays.length; i++){
				overlays[i].disableEditing();
			}
			enableEditingOverlay = e.target;
			e.target.enableEditing();
		});
		drawingManager.close();

    };
    
	var addoverlay = function(e){
		var overlayString = e.target.toString();
			if(overlayString.indexOf("Marker") == -1){
				e.target.addEventListener("dblclick", function(e) {
					enableEditingOverlay = drawingManager;
					e.target.enableEditing();
				});
			}
    };

    var styleOptions = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'dashed' //边线的样式，solid或dashed。
    }
	
    //实例化鼠标绘制工具
		var drawingManager = new BMapLib.DrawingManager(map, {
			isOpen: false, //是否开启绘制模式
			enableDrawingTool: false, //是否显示工具栏
			drawingToolOptions: {
				anchor: BMAP_ANCHOR_TOP_LEFT, //位置
				offset: new BMap.Size(5, 5), //偏离值
				drawingModes : [
					BMAP_DRAWING_MARKER,
					BMAP_DRAWING_POLYLINE,
					BMAP_DRAWING_POLYGON
				 ],
				scale: 1.0 //工具栏缩放比例
			},
			/*circleOptions: styleOptions, //圆的样式*/
			polylineOptions: styleOptions, //线的样式
			polygonOptions: styleOptions
		});  
		
    //添加鼠标绘制工具监听事件，用于获取绘制结果
	drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    //点击图层是监听事件
	map.addEventListener('addoverlay', addoverlay);
	

	var drawingMode;

	function addMarker(){
		
		drawingMode = BMAP_DRAWING_MARKER;
		var emapStyleOptions = new EmapStyleOptions();
		initDrawingManager2(drawingManager);
	}



	function initDrawingManager2(drawingManager,emapStyleOptions){
		 //添加鼠标绘制工具监听事件，用于获取绘制结果
		drawingManager.polylineOptions = emapStyleOptions;
		drawingManager.polygonOptions = emapStyleOptions;
		drawingManager.setDrawingMode(drawingMode); 
		drawingManager.open();
	}

	
	function EmapStyleOptions() {
        this.strokeColor = "blue";    //边线颜色。
        this.fillColor = "red";    //填充颜色。当参数为空时，圆形将没有填充效果。
        this.strokeWeight = 3;      //边线的宽度，以像素为单位。
        this.strokeOpacity = 0.8;	   //边线透明度，取值范围0 - 1。
        this.fillOpacity = 0.6;      //填充的透明度，取值范围0 - 1。
        this.strokeStyle = 'dashed'; //边线的样式，solid或dashed。
	}
	
	// EMapMarker 对应Baidu的Marker
	function EMapMarker(name, code, lng, lat) {
		this.name = name;
		this.code = code;
		this.type = "Marker";
		this.position = new Array();
		this.position.push(lng);
		this.position.push(lat);
	}
	
	//在配置项中重新设定地图中心点
	function resetMapCenter(){
		var point = map.getCenter();
		var x = point.lng, y = point.lat;
		$("#input_x").text(x);
		$("#input_y").text(y);
	}

	//在配置项中重新设定地图的zoom值
	function resetMapZoom(){
		var zoom = map.getZoom();
		$("#input_zoom").text(zoom);
		resetMapCenter();
	}
	
    function clearAll() {
    	$("#marker_x").empty();
		$("#marker_y").empty();
    	
		for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0   
    }
	
	
	// 获取URL地址参数
	function getQueryString(name, url) {
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	    if (!url || url == ""){
		    url = window.location.search;
	    }else{	
	    	url = url.substring(url.indexOf("?"));
	    }
	    r = url.substr(1).match(reg)
	    if (r != null) return unescape(r[2]); return null;
	}
	
</script>

</body>
</html>
